<template>
	<van-nav-bar title="推广任务量" />

	<van-cell-group inset style="margin-top: 0.625rem;margin-bottom: 0.625rem;">
		<van-field label="保证金" v-model="price" placeholder="请输入保证金" required/>
		<van-field label="计算口径" required>
			<template #input>
				<van-radio-group v-model="type" direction="horizontal">
					<van-radio name="1">发货</van-radio>
					<van-radio name="2">回款</van-radio>
					<van-radio name="3">纯销</van-radio>
				</van-radio-group>
			</template>
		</van-field>
		<van-field label="终端选择" placeholder="请选择协议中涉及的终端" @click="moreChoice" is-link required />
	</van-cell-group>

	<more-picker :popupVisible="popupVisible" :options="options" @selected="zdSelected" label="终端"
		placeholder="请选择终端" />

	<van-cell-group inset v-for="(item,index) in cards" :key="index"
		style="margin-top: 0.625rem;margin-bottom: 0.625rem;">
		<van-cell>
			<template #value>
				<van-icon @click="delCard(index)" name="delete" style="font-size: 18px; color: #ff0000;" />
			</template>
		</van-cell>
		<van-cell title="区域" :value="item.poprange" />
		<van-cell title="品规" :value="item.pg" @click="setPg(index)" is-link />
		<van-field label="总销量" placeholder="请设置总销量" @click="showCenter = true" required />
	</van-cell-group>

	<van-action-bar>
		<van-action-bar-icon icon="arrow-left" text="上一步" />
		<van-action-bar-icon icon="gold-coin-o" text="9000" />
		<van-action-bar-button color="#00bffe" type="danger" text="下一步" @click="waychoice = true" />
	</van-action-bar>

	<task-item :showCenter="showCenter" @update:task="updateTask" :tasktype="'pop'"></task-item>

	<van-action-sheet cancel-text="取消" @cancel="waychoice=false" description="任务量" :show="waychoice"
		:actions="menuActions" @select="onSelect" close-on-click-action />

	<van-popup v-model:show="showPicker" round position="bottom">
		<van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
	</van-popup>

</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
		import { useAgreementStore } from '@/store'
import { showConfirmDialog, showToast } from 'vant';
		const store = useAgreementStore();
		const formData = store.agreement;
	const waychoice = ref(false)
	const router = useRouter()
	const menuActions = ref([{
		name: '活动任务'
	},
	{
		name: '无', child: [{name: '配送商业&联系人',child:[]}]
	}
	]);
	const onSelect = (action : any) => {
		if ('活动任务' == action.name) {
			router.push('/activitytasks')
		}else if ('配送商业&联系人' == action.name) {
		 	router.push('/businessperson')
		} else {
			menuActions.value = action.child;
		}
	}
	const showCenter = ref(false)
	const options = ref([]);
	const cards = ref([]);
	const popupVisible = ref(false)
	const updateTask = (tasks : any) => {
		showCenter.value = false;
	}
	const price = ref(0)
	const type = ref("")
	const currenti = ref(0);
	const showPicker = ref(false)
	const setPg = (index : number) => {
		currenti.value = index;
		showPicker.value = true;
	}
	const zdSelected = (zds : []) => {
		zds.forEach((item : any) => {
			cards.value.push({
				zdName: '',
				poprange: item.text
			})
		})
		popupVisible.value = false;
	}
	const columns = ref([
		{ text: '布地奈德(1ml)', value: '布地奈德(1ml)' },
		{ text: '布地奈德(2ml)', value: '布地奈德(2ml)' },
	]);
	
	const moreChoice = () => {
		if (formData.zds.length != 0) {
			options.value = formData.zds;
		} else {
			options.value.push({ text: "测试终端1" })
			options.value.push({ text: "测试终端2" })
		}
		popupVisible.value = true;
	}
	const delCard = (index : number) => {
		showConfirmDialog({
			title: '提示',
			message: '当前为删除操作请注意',
		})
			.then(() => {
				cards.value.splice(index, 1);
				showToast("删除成功")
			})
			.catch(() => {
				showToast("取消")
			});
	}
	const onConfirm = ({ selectedOptions }) => {
		showPicker.value = false;
		cards.value[currenti.value].pg = selectedOptions[0].text;
	}
</script>

<style>
</style>